<template>
    <div class="select-guarantee">

        <section 
            v-for="(section,index) in allSectionList" 
            :key="index"
            v-show="section.isShow" 
        >
            <h3>
               {{ section.title }}
            </h3>

            <div class="type-box">
                <div
                    v-for="(cItem,cIndex) in section.typeList"
                    :key="cIndex"
                    :class="selectForm[section.id] === cItem.valueid ? 'item-box activated' : 'item-box'"
                    @click="section['handler'](cItem)"
                >
                    <div class="img-icon">
                        <img src="" alt="">
                    </div>
                    <span>{{ cItem.valuename }}</span>
                </div>
            </div>

            <div class="remark" v-if="!!section.remark">
                注：{{ section.remark }}
            </div>

        </section>

        <div class="expect-time">
            <h3>预计出函时间：</h3>
            <span v-show="!!expectTime">{{ expectTime }} 个工作日</span>
        </div>

        <div class="btns">
            <el-button type="primary" @click="handlerOk">
                确认
            </el-button>
        </div>

        
        <my-dialog
            v-model="selectGuaranteeCompanyDialogStatus"
            :title="'选择金融机构'"
            :width="'800px'"
            :showclose="true"
            :top="'80px'"
        >
            <select-guarantee-company>

            </select-guarantee-company>
        </my-dialog>

    </div>
</template>
<script>
import commonType from '@mixins/commonType'
import selectGuaranteeCompany from '@/components/guarantee/selectGuaranteeCompany'
export default {
    name: 'selectGuarantee',
    components: {
        selectGuaranteeCompany,
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
    },

    mixins: [commonType],

    data () {
        return {
            selectForm:{
                bhlx:'',
                chjg:'',
            },

            expectTime:'1',
            selectGuaranteeCompanyDialogStatus:false,
        }
    },
    computed: {

        allSectionList:function(){
            return [
                {
                    id:'bhlx',
                    title:'保函类型',
                    typeList:this.bhlxList,
                    handler:(cItem)=>{
                        this.bhlxHandler(cItem)
                    },
                    isShow:true,
                },

                {
                    id:'chjg',
                    title:'出函机构',
                    typeList:this.chjgList,
                    handler:(cItem)=>{
                        this.chjgHandler(cItem)
                    },
                    isShow:true,
                },

                {
                    id:'sfrz',
                    title:'担保公司',
                    typeList:[
                        {
                            valueid:'融资性担保公司',
                            valuename:'融资性担保公司',
                        },
                        {
                            valueid:'非融资性担保公司',
                            valuename:'非融资性担保公司',
                        }
                    ],
                    handler:(cItem)=>{
                        this.sfrzHandler(cItem)
                    },
                    remark:'根据文件要求选择，如无特殊要求可不选择',
                    isShow:this.sfrzIsShow,
                }
            ]
        },

        sfrzIsShow:function(){
            return this.selectForm.bhlx === 'lybh' && this.selectForm.chjg === 'dbjg' ? true : false
        }


    },
    watch: {
        sfrzIsShow:function(n,o){
            if( n=== false && !!this.selectForm.sfrz){
                delete this.selectForm.sfrz
            }
        }      


    },
    methods: {
        bhlxHandler(item){
            if( this.selectForm.bhlx === item.valueid){
                return this.selectForm.bhlx = '';
            }
            this.selectForm.bhlx = item.valueid
        },

        chjgHandler(item){
            if( this.selectForm.chjg === item.valueid){
                return this.selectForm.chjg = '';
            }
            this.selectForm.chjg = item.valueid
        },

        sfrzHandler(item){
            if( this.selectForm.sfrz === item.valueid){
                return this.$set(this.selectForm , 'sfrz' , undefined)
            }
            this.$set(this.selectForm , 'sfrz' , item.valueid)
        },

        handlerOk(){
            let that = this;
            if(!this.selectForm.bhlx) return ShowMsg('请选择保函类型','warning');

            if(!this.selectForm.chjg) return ShowMsg('请选择出函机构','warning');

            let msgHtml = 
                '您选择的是由 <span style="color:#f18241">'+
                filterLabel(this.chjgList , this.selectForm.chjg , 'valueid').valuename 
                +'</span> 出具的 <span style="color:#f18241">'+
                filterLabel(this.bhlxList , this.selectForm.bhlx , 'valueid').valuename 
                +'</span>'
            
            this.$confirm(msgHtml,'提示',{
                dangerouslyUseHTMLString:true,
                confirmButtonText:'确认办理',
                cancelButtonText:'重新选择',
                type:'info',
                callback:function(action,instance){
                    if(action == 'confirm'){
                        that.goGuaranteeUrl();
                    }
                }
            })
        },

        goGuaranteeUrl(){
            this.$post(this.$store.getters['api/commonreq'].bhbltd , this.selectForm, (data)=>{

                if(data === true) {
                    if(this.selectForm.bhlx === 'tbbh'){
                        this.selectGuaranteeCompanyDialogStatus = true;
                    }else{
                        this.goto({
                            path:'/sys/all'
                        })
                    }
                }else{
                    ShowMsg('暂未开通此保函类型办理通道','error');
                }
            })

        }
    },
    created () {
    },
    mounted () {

    },
}
</script>
<style lang="scss" scoped>
    @import '@css/var.scss';
    .select-guarantee{

        section {
            padding-bottom: 10px;
            h3{
                font-weight: normal;
            }

            .type-box{
                padding-top: 10px;
                display: flex;
                
                .item-box{
                    width: 160px;
                    height: 150px;
                    margin-right: 20px;
                    font-size: 16px;
                    text-align: center;
                    font-weight: bold;
                    box-shadow: 0 0 30px #dadada;
                    border-radius: 5px;
                    cursor: pointer;

                    .img-icon{
                        height: 110px;
                        font-size: 0;
                    }
                }

                .activated{
                    transition: all 0.3s;
                    border: 1px solid $primaryColor;
                    color: $primaryColor;
                }

 
                .item-box:nth-last-child(1){
                    margin-right: 0;
                }
            }

            .remark{
                padding-top: 8px;
                color: $primaryColor;
            }
        }
        

        .expect-time{
            display: flex;
            align-items: center;
            h3{
                font-weight: normal;
            }
            span{
                color: $primaryColor;
                font-size: 16px; 
            }
        }

        .btns{
            padding:10px 0 0;
            text-align: center;
        }
    }

</style>
